<template>
	<div class="left3">
		<div class="left3_info" @click="paidan">
			<div>{{ data.未开始 }}</div>
			<div>0</div>
			<div>{{ data.已签到 }}</div>
			<div>{{ data.已完成 }}</div>
			<div>{{ data.已审核 }}</div>
			<div>{{ data.已结案 }}</div>
		</div>
	</div>

	<el-dialog v-model="dialogVisible" width="1200" :before-close="handleClose" style="
      background: linear-gradient(
        135deg,
        rgba(0, 32, 80, 0.9),
        rgba(18, 18, 144, 1)
      );
      box-shadow: rgba(0, 196, 255, 0.894) 0px 0px 14.5332px 0px,
        rgba(0, 146, 255, 0.694) 0px 0px 29.0663px 0px,
        rgba(0, 196, 255, 0.592) 0px 0px 14.5332px 0px inset;
    ">
		<div class="dialogVisiblelog">
			<div class="tabs-container">
				<div class="tabs-header">
					<div v-for="(item, index) in tabsList" :key="index" class="tab-item"
						:class="{ active: activeTab === index }" @click="changeTab(index)">
						{{ item }}
						<div class="underline"></div>
					</div>
				</div>
				<div class="tabs-content">
					<div class="grid-container">
						<div v-for="(item, index) in state.dataList" :key="index" class="grid-item">
							<div><span>2020-06-03</span><span>14:00</span></div>
							<div>
								<span>安装位置：</span><span>{{ item.installationLocation }}</span>
							</div>
							<div>
								<span>注册编码：</span><span>{{ item.registrationCode }}</span>
							</div>
							<div>
								<span>救援编码：</span><span>{{ item.rescueIdentificationCode }}</span>
							</div>
							<div>
								<span>维保单位：</span><span>{{ item.maintenanceCorporation }}</span>
							</div>
							<div><span>状态：</span><span>{{ item.procStage }}</span></div>
						</div>
					</div>
					<div v-if="state.dataList.length > 0"
						style="display: flex; justify-content: center; margin-bottom: 15px">
						<el-pagination layout="prev, pager, next" :total="state.total" :current-page="state.beg.page"
							@current-change="handlePageChange" />
					</div>
					<div v-else style="display: flex; justify-content: center; margin-bottom: 15px">
						<el-empty description="没有数据" />
					</div>
				</div>
			</div>
		</div>
	</el-dialog>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from "vue";

	import {
		faultStatistics,
		faultList
	} from "@/api";
	const username = ref('')
	username.value = localStorage.getItem('username')
	const tabsList = ref([
		//   { title: "未派单", index: 0 },
		//   { title: "已接单", index: 1 },
		//   { title: "已签到", index: 2 },
		//   { title: "已完成", index: 3 },
		//   { title: "已审核", index: 4 },
		//   { title: "已结案", index: 5 },
	]);
	let data = ref([]);
	const dialogVisible = ref(false);
	const paidan = () => {
		changeTab(0);
		dialogVisible.value = true;
	};

	faultStatistics(username.value).then((res) => {
 

		//   const statusKeys = console.log(statusKeys);
		tabsList.value = Object.keys(res.data);
		data.value = res.data;
	});

	const state = reactive({
		dataList: [],
		total: 0,
		beg: {
			procStage: "",
			page: 1,
			size: 6,
		},
	});

	const init = () => {
		faultList(state.beg).then((res) => {
			console.log(res);
			state.dataList = res.data.content;
			state.total = res.data.totalElements;
		});
	};
	const activeTab = ref();
	// 切换选项卡
	const changeTab = (index) => {
		activeTab.value = index;
		state.beg.procStage = tabsList.value[index];
		init();
	};
	const handlePageChange = (val) => {
		state.beg.page = val;

		init();
		// 这里可以添加数据加载逻辑
	};
</script>

<style scoped>
	.grid-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* 每行3列 */
		gap: 16px;
		/* 项目间距 */
	}

	.grid-item {
		/* border: 1px solid #eee; */
		border: 1px solid #000;
		background-color: #ebdcdc;
		padding: 12px;
		margin: 15px;
		border-radius: 4px;
	}

	.tabs-container {
		width: 100%;
	}

	.tabs-header {
		display: flex;
		position: relative;
		justify-content: center;
		padding-bottom: 4px;
	}

	.tab-item {
		padding: 8px 16px;
		cursor: pointer;
		position: relative;
		margin-right: 16px;
		font-weight: 500;
		color: #666;
		transition: color 0.3s ease;
	}

	.tab-item.active {
		/* color: #1890ff; */
		color: white;
		font-size: 15px;
		border-bottom: 1px solid white;
	}

	.underline {
		position: absolute;
		bottom: -5px;
		left: 0;
		height: 2px;
		background-color: #1890ff;
		transition: all 0.3s ease;
		border-radius: 2px;
	}

	.left3 {
		width: 400px;
		height: 533px;
		/* background-color: #fff; */
		background-image: url("@/assets/1.png");
	}

	.left3_info {
		position: relative;
		top: 100px;
		/* 可根据实际需求调整该值 */
		font-size: 15px;
		line-height: 70px;
		margin-left: 140px;
		color: #ffffff;
		z-index: 95;
	}

	.dialogVisiblelog {
		border: 1px solid rgba(32, 54, 95, 1);
		/* background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
		background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); */
	}

	:dep(.el-overlay-dialog) {
		background: black !important;
	}
</style>